<template>
	<div class="staffFlow">
		<span class="tittle">康恒医院医生人员流动记录表</span>
		<div class="replyBtn">
			<el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
		</div>
		<el-table :data="staffFlowlist" style="width: 100%;" height="500">
			<el-table-column type="expand">
				<template scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<el-form-item label="姓名:">
							<span>{{ props.row.name }}</span>
						</el-form-item>
						<el-form-item label="性别:">
							<span>{{ props.row.sex }}</span>
						</el-form-item>
						<el-form-item label="学历:">
							<span>{{ props.row.degree }}</span>
						</el-form-item>
						<el-form-item label="专业:">
							<span>{{ props.row.major }}</span>
						</el-form-item>
						<el-form-item label="科室:">
							<span>{{ props.row.office }}</span>
						</el-form-item>
						<el-form-item label="员工编号:">
							<span>{{ props.row.id }}</span>
						</el-form-item>
						<el-form-item label="入职时间:">
							<span>{{ props.row.date }}</span>
						</el-form-item>
						<el-form-item label="离职时间:">
							<span>{{ props.row.leave_date }}</span>
						</el-form-item>
						<el-form-item label="离职原因:">
							<span>{{ props.row.reason }}</span>
						</el-form-item>
						<el-form-item label="职称:">
							<span>{{ props.row.profession }}</span>
						</el-form-item>
						<el-form-item label="处理人:">
							<span>{{ props.row.processor }}</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="医生编号" prop="id"></el-table-column>
			<el-table-column label="医生姓名" prop="name"></el-table-column>
			<el-table-column label="入职日期" prop="date"></el-table-column>
			<el-table-column label="离职日期" prop="leave_date"></el-table-column>
			<el-table-column label="离职原因" prop="reason"></el-table-column>
		</el-table>
	</div>
</template>

<script type="text/ecmascript-6">
	import {
		api
	} from '../../../global/api.js';
	export default {
		data() {
			return {
				staffFlowlist: []
			};
		},
		methods: {
			// 导出信息表
			handleDownload() {
				// 导出
				var vm = this;
				require.ensure([], () => {
					const {
						export_json_to_excel
					} = require('vendor/Export2Excel');
					const tHeader = ['医生编号', '姓名', '性别', '学历', '专业', '科室', '入职日期', '离职时间', '离职原因', '职称', '处理人'];
					const filterVal = ['id', 'name', 'sex', 'degree', 'major', 'office', 'date', 'leave_date',
						'reason',
						'profession',
						'processor'
					];
					const staffFlowlist = vm.staffFlowlist;
					const data = vm.formatJson(filterVal, staffFlowlist);
					export_json_to_excel(tHeader, data, '医生离职人员信息列表excel');
				});
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]));
			}
		},
		created() {
			//获取离职医生信息
			let API = "http://localhost:8088/getResignDoctor";
			this.$http.get(API).then((response) => {
				for (var i = 0; i < response.body.data.length; i++) {
					if (response.body.data[i].sex == 1) {
						response.body.data[i].sex = "男";
					} else {
						response.body.data[i].sex = "女";
					}
					const dateString = response.body.data[i].date;
					const dateString2 = response.body.data[i].leave_date;
					const date = new Date(dateString);
					const date2 = new Date(dateString2);

					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
					const day = String(date.getDate()).padStart(2, '0');
					const year2 = date2.getFullYear();
					const month2 = String(date2.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
					const day2 = String(date2.getDate()).padStart(2, '0');

					const formattedDate = `${year}-${month}-${day}`;
					const formattedDate2 = `${year2}-${month2}-${day2}`;

					response.body.data[i].date = formattedDate;
					response.body.data[i].leave_date = formattedDate2;
				}
				this.staffFlowlist = response.body.data;
			}, response => {
				// error callback
				this.$message({
					message: '数据请求失败',
					type: 'error'
				});
			});
		}
	};
</script>

<style>
	.staffFlow .el-table-column label .tittle {
		font-size: 22px;
	}

	.staffFlow .demo-table-expand {
		font-size: 0;
	}

	.staffFlow .demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.staffFlow .demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.staffFlow .tittle {
		display: block;
		text-align: center;
		font-size: 24px;
		line-height: 80px;
	}

	.staffFlow .replyBtn {
		float: right;
		padding-bottom: 50px;
	}

	.staffFlow .el-dialog--small {
		width: auto;
		padding-right: 50px;
	}
</style>